<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" import="com.mmp.main.util.*"%>
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-themes-1.10.4/themes/flick/jquery-ui.min.css"/>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-themes-1.10.4/themes/flick/jquery.ui.theme.css"/>
<link rel="stylesheet" href="js/appendGrid/jquery.appendGrid-1.3.5.min.css" />
<link rel="stylesheet" href="css/pure-min.css"/>
<link rel="stylesheet" href="css/pure-skin-mine.css"/>
<!--<link rel="stylesheet" href="js/uploadify/uploadify.css"/>-->
<link type="text/css" rel="stylesheet" href="css/slidedown-menu.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<!--<link type="text/css" rel="stylesheet" href="jOrgChart/example/css/jquery.jOrgChart.css" />-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/datepicker-ar.js"></script>
<!--<script type="text/javascript" src="js/fileinput/jquery.fileinput.min.js"></script>-->
<script type="text/javascript" src="js/appendGrid/jquery.appendGrid-1.3.5.min.js"></script>
<script type="text/javascript" src="js/validation/jquery.validate.min.js"></script>
<!--<script type="text/javascript" src="js/validation/additional-methods.min.js"></script>-->
<script type="text/javascript" src="js/validation/jquery.ui.datepicker.validation.min.js"></script>
<script type="text/javascript" src="js/validation/messages_ar.js"></script>
<!--<script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script>-->
<script type="text/javascript" src="js/slidedown-menu.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<script type="text/javascript" src="jOrgChart/example/jquery.jOrgChart.js"></script>-->

<title>BiomedApp :: صفحة الدخول</title>
<style type="text/css">
label.error {
	display: block;
	margin-right: 5px !important;
	color: #F00 !important;
}
div#login_form {
	width: 35%;
	padding: 25px 50px;
	border: 1px solid #333;
	margin: 40px auto
}
</style>
<script type="text/javascript">
$(function(){

      $("body").prop("class","pure-skin-mine");
      $("form").prop("class","pure-form");
	  
      // style buttons with pure framework
      $("input[type='button']").addClass("pure-button");
      $("input[type='submit']").addClass("pure-button pure-button-primary"); 
      
      $("form").validate({
                rules: {
                    userName: "required",
                    password: "required"
                    },
                messages: {
                    userName: "من فضلك أدخل اسم المستخدم",
                    password: "من فضلك أدخل كلمة المرور"
                }
        });
	  
});   
</script>
</head>
<body>
<noscript>
<div id="page_mask"> You can not  use the application with the javascript disabled <br />
  please enable javascript from browser configurations<br />
  then click <a href='<%=request.getAttribute("javax.servlet.forward.request_uri")%>'>here</a> to continue </div>
</noscript>
<div id="container">
  <div id="header"> 
    <!--<div id="top"></div>-->
    <div id="logo"> <img src="image/logo.png" width="960" height="116" /> </div>
  </div>
  <div id="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top" id="content_container"><form action="<%=request.getContextPath()%>/LoginProcess" method="post">
            <div id="login_form">
              <table align="center" class="layout_grid">
                <tr>
                  <td colspan="2"><%=WebUtil.getSessionMessage(request)%></td>
                </tr>
                <tr>
                  <td class="side_label_top">   اسم المستخدم :  </td>
                  <td><input id="userName" name="userName" type="text"></td>
                </tr>
                <tr>
                  <td class="side_label_top">كلمة المرور :</td>
                  <td><input id="password" name="password" type="password"></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td><input type="submit" name="button" id="button" value="دخول"></td>
                </tr>
              </table>
            </div>
          </form></td>
      </tr>
    </table>
  </div>
  <%@include file="Footer.jsp" %>
</div>
</body>
</html>
